/* JOPLIN WANAKA UI - v0.5.0 */

/**************************************************************************************************
 *  VARIABLES
 *************************************************************************************************/

html {
  /* side-bar background color from light theme */
  --floating-bg: rgb(49, 54, 64);

  --link-color: rgb(255, 255, 255);

  --overlay-dark1: rgba(0, 0, 0, 0.1);
  --overlay-dark2: rgba(0, 0, 0, 0.2);
  --overlay-dark5: rgba(0, 0, 0, 0.5);
  --overlay-light1: rgba(255, 255, 255, 0.1);
  --overlay-light5: rgba(255, 255, 255, 0.5);

  /* TWEAK: Set to none if no borders shall be shown (not tested) */
  --default-border: 1px solid var(--overlay-light1);

  /* TWEAK: Change to adapt the style of the corners of some UI elements */
  --dialog-radius: 10px;
  --scroll-radius: 3px;

  /* TWEAK: Show/hide shadow on floating TOC */
  --shadow: 0 2px 12px 0 var(--overlay-dark2);
}

/**************************************************************************************************
 *  GLOBALS
 *************************************************************************************************/

/* TWEAK: Show/hide icon for internal links */
/*.fa-joplin {
  display: none;
}*/

/* scrollbars */
::-webkit-scrollbar-thumb {
  background-color: var(--overlay-dark1) !important;
  border-radius: var(--scroll-radius) !important;
}

/**************************************************************************************************
 *  CONTENT
 *************************************************************************************************/

/* global font */
body {
  font-family: Roboto;
  line-height: 1.2em !important;
}

/* code */
code {
  font-family: "Roboto Mono", Consolas, "Courier New", monospace;
  font-size: small;
}

/* horizontal rule */
hr {
  border-width: 1px !important;
}

/* strikethrough checked task list items (https://discourse.joplinapp.org/t/share-your-css/1730/189) */
li.md-checkbox input[type="checkbox"]:checked + label {
  text-decoration: line-through rgba(0, 0, 0, 0.5);
}

/**************************************************************************************************
 *  EMBED SEARCH PLUGIN
 *************************************************************************************************/

.embed-search > div > div {
  align-items: center;
  padding-bottom: 5px !important;
}
.embed-search a {
  text-decoration: none !important;
}
.embed-search > div > div > div {
  margin: 0 !important;
}
.embed-search > div > div > div:first {
  text-align: center;
}
.embed-search input {
  cursor: pointer;
}
.embed-search > div > div > div:empty:after {
  content: "📄";
}

/**************************************************************************************************
 *  TABLE OF CONTENTS
 *  Based on the idea from here: https://discourse.joplinapp.org/t/toc-as-the-sidebar/5979/34
 *************************************************************************************************/

nav.table-of-contents > ul {
  background: none;
  font-size: small;
  height: 80%;
  overflow: hidden;
  padding: 5px;
  position: fixed;
  right: 6px;
  top: 0;
  width: 10px;
  z-index: 10;
}
nav.table-of-contents > ul:hover {
  background-color: var(--floating-bg);
  border-radius: var(--dialog-radius);
  box-shadow: var(--shadow);
  overflow: scroll;
  width: auto;
}
nav.table-of-contents > ul:hover li {
  display: list-item;
}
nav.table-of-contents ul {
  list-style-type: none;
  margin-bottom: 0;
  margin-left: 8px;
  margin-top: 0;
  min-width: 100px;
}
nav.table-of-contents li {
  display: none;
  line-height: 1.8em;
  margin-bottom: 0;
  white-space: nowrap;
}
nav.table-of-contents li a {
  color: var(--link-color) !important;
  opacity: 0.8;
  padding: 5px;
}
nav.table-of-contents ul li ul li {
  border-left: var(--default-border) !important;
}
nav.table-of-contents a {
  text-decoration: none !important;
}
